import './index.scss'
import {Button, Input, Modal} from 'antd';
import React, { useState } from 'react';
import store from "../../../store";
import {observer} from 'mobx-react'

const AddTag = () => {
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [val,setVal]=useState('')
    const change=(ev)=> {
        setVal(ev.target.value)
    }

    const handleOk = () => {
        console.log(val)
        store.contentLabel.addLabel(val)
        setIsModalOpen(false);
    };

    const handleCancel = () => {
        setIsModalOpen(false);
    };
    return <div id={"addTag"}>
        <Button onClick={()=>void setIsModalOpen(true)}>添加</Button>
        <Modal
            title="添加标签"
            open={isModalOpen}
            onOk={handleOk}
            onCancel={handleCancel}
            cancelText={'取消'}
            okText={'保存'}
        >
            <Input value={val} onChange={change}/>
        </Modal>
    </div>
}
export default observer(AddTag)